@import 'utils';

.landing-template {
  display: flex;
  margin-left: 2rem;
  margin-right: 2rem;
  @include media('<medium') {
    flex-direction: column;
  }
  .left-text {
    flex: 1;
    padding-right: 3rem;
    align-items: center;
    h1 {
      font-size: 3.5rem;
      font-weight: 500;
      line-height: 1.2em;
      @include media('<huge') {
        font-size: 2.85rem;
      }
      @include media('<medium') {
        font-size: 2rem;
      }
    }
    p {
      font-weight: 300;
      font-size: 1.25rem;
      @include media('<huge') {
        font-size: 1rem;
      }
      @include media('<medium') {
        font-size: 1.25rem;
        br {
          display: none;
        }
      }
    }
  }
  .right-form {
    flex: 1;
    max-width: 480px;
    margin-left: 2rem;
    margin-top: 2rem;
    border-radius: 4px;
    .black-box {
      display: flex;
      flex-direction: column;
      width: 100%;
      background: $oc-gray-8;
      color: white;
      border-radius: 4px;
      @include material-shadow(3, 0.75);
      @include media('<large') {
        width: calc(100% - 2rem);
      }
      .login-title {
        margin-top: 1rem;
        text-align: center;
      }
      .register-button {
        display: none;
        @include media('<medium') {
          display: flex;
        }
        width: 15rem;
        background: $oc-gray-8;
        color: white;
        font-weight: 500;
        padding-top: 1rem;
        padding-bottom: 1rem;
        justify-content: center;
        font-size: 1.5rem;
        border-radius: 4px;

        transition: box-shadow 0.15s ease-in;
        cursor: pointer;
        border: 2px solid transparent;
        user-select: none;
        @include material-shadow(1, 1);
        @include hover() {
          @include material-shadow(3, 1);
        }
        &:active {
          border: 2px solid $oc-gray-9;
          background: white;
          color: $oc-gray-9;
        }
      }
    }

    @include media('<large') {
      margin-left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
}
